/* eslint-disable comma-dangle */
import React, {useState} from 'react';
import s from './style.module.less';
import i from '../../common.module.css';
import { Tabs, Confirm, Message, Form, Input, Dialog, Button } from '@knownsec/react-component';
import recursionForm from '@/common/recursionForm';
import { putTargetName } from '~/API';
import BreadCrumbBox from '@/components/BreadCrumb';
import Accessibility from './accessibility';
import Incident from './incident';
import Vul from './vul';
import RiskLink from './risklink';
import ChangeCheck from './changeCheck';
import { useLocation } from 'react-router-dom';

const { TabPane } = Tabs;
let childPages = [
  {
    name: '可用性',
    component: Accessibility,
  },
  {
    name: '安全事件',
    component: Incident,
  },
  {
    name: '漏洞',
    component: Vul,
  },
  {
    name: '风险外链',
    component: RiskLink,
  },
  {
    name: '篡改',
    component: ChangeCheck,
  },
];

function TaskInfo() {
  const createForm = React.useRef();
  const backFunc = React.useRef();
  const [tabChange, setTabChange] = useState('可用性')
  const params = useLocation().pathname.split('/');
  const idarr = params.filter((item) => item.indexOf('id=') > -1);
  const id = idarr.length ? idarr[0].split('id=')[1] : '';
  const arr = [
    { link: '', name: '任务管理' },
    { link: '/task_group', name: '任务组' },
    { link: '', name: '查看', active: true },
  ];
  const [visible, setVisible] = useState(false)
  const [changeNameRow, setChangeNameRow] = useState(null)
  const [name, setChangeName] = useState('')
//   const [backFun, setFun] = useState(() => {})
  const onValues = (data) => {
    let values = recursionForm(data);
    createForm.current.setFieldsValue(values);
    setChangeName(values);
  };
  
  function validatormap(rule, value, callback) {
    if (value.length > 50) {
      callback('名称最大长度为50');
    } else {
      return Promise.resolve();
    }
  }
    const Tabcon = React.useCallback(
      ({ id, createForm }) => (
        <Tabs
        onTabClick={(e) => {
            setTabChange(e)
        }}
        activeKey={tabChange}
        tabBarStyle={{
            backgroundColor: '#ffffff',
            fontSize: 14,
            fontWeight: 400,
            color: '#1E1F23',
            paddingLeft: 48,
            borderColor: '#ffffff',
            marginBottom: '0px',
        }}
        >
        {childPages.map((child) => {
            let { name, component: Comp } = child;
            return (
            <TabPane tab={name} key={name}>
                <Comp id={id} change={changeName} createForm={createForm} />
            </TabPane>
            );
        })}
        </Tabs>
    ), [tabChange])
  const changeName = (row, createForm, backfun) => {
    createForm.current.setFieldsValue({name: row.target_name || row.target_title})
    setChangeNameRow(row)
    setVisible(true)
    backFunc.current = backfun
  }
  const onSubmit = async () => {
      const res = await putTargetName({ data: { target_name: name.name }, id: changeNameRow.target_id });
      if (res.status === 'success') {
        Message.show({
          pro: true,
          type: 'success',
          message: '修改成功',
          showClose: false,
        });
        setVisible(false)
        return backFunc.current(1);
        // getList();
      }
  }
  return (
    <>
      <BreadCrumbBox arr={arr}></BreadCrumbBox>
      <div className={s.content}>
        <Tabcon id={id} createForm={createForm}></Tabcon>
      </div>
      <Dialog 
        className="w540" 
        title="设置业务系统名称" 
        visible={visible} 
        cusCancel={<Button type="default" className={i.mr20} onClick={() => {
          setVisible(false)
          createForm.current.resetFields();
        }}>取消</Button>}
        onhide={() => {
          setVisible(false)
          createForm.current.resetFields();
      }} onsubmit={onSubmit}>
        <div className={s.p24}>
          <Form
            ref={createForm}
            onValuesChange={(newItem, allValues) => {
                onValues(newItem, allValues);
            }}
            >
            <Form.Item
                rules={[{ validator: validatormap }]}
                name="name"
                label="业务系统名称"
                initialValue={changeNameRow?.target_name ? changeNameRow?.target_name : changeNameRow?.target_title}
            >
                <Input
                pro
                className="inpName"
                maxlength={50}
                placeholder="请输入业务系统名称（最长50个字符）"
                ></Input>
            </Form.Item>
          </Form>
        </div>
      </Dialog>
    </>
  );
}

export default TaskInfo;
